var app = null;
var picker = null;

mui.init({
    pullRefresh: {
        container: '#pullrefresh',
        down: {
            style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
            offset:'50px', //可选 默认0px,下拉刷新控件的起始位置
            callback: pulldownRefresh
        },
        up: {
            contentrefresh: '正在加载...',
            callback: pullupRefresh
        }
    }
});

/**
 * 下拉刷新具体业务实现
 */
function pulldownRefresh() {
    setTimeout(function() {
        var table = document.body.querySelector('.mui-table-view');
       
        //查询数据，渲染视图
        jQuery.ajax({
            url: OPENAPI.selectItem,
            data:{
                index : 0,
                size  : 10,
                itemName : app.itemName ,
                type : app.type,
                startTime : app.startTime ,
                endTime : app.endTime ,
                sorting :app.sorting 
            },
            dataType:'json',
            type:'post',
            timeout:5000,
            success:function(data){
                //清除列表内容
                table.innerHTML = '';

                var listData = data.list;
                if( listData.length > 0 ){
                    for( var i=0; i<listData.length; i++ ){
                        table.innerHTML += '<li id="'+ listData[i].itemId +'" class="mui-table-view-cell">'+
                                                '<div class="mui-table">'+
                                                    '<div class="mui-table-cell mui-col-xs-10">'+
                                                        '<h4 class="mui-ellipsis">'+ listData[i].itemName +'</h4>'+
                                                        '<p class="mui-h6 mui-ellipsis">发布时间:'+ FormatDate(listData[i].updatetime) +'</p>'+
                                                        '<p class="mui-h6 mui-ellipsis">资料完整度：'+ listData[i].s1 +'</p>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</li>';
                    }
                }else{
                    table.innerHTML = '';
                }
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //结束刷新动画
                mui('#pullrefresh').pullRefresh().refresh(true);
            },
            error:function(xhr,type,errorThrown){
                mui.toast('网络连接异常');
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //结束刷新动画
                mui('#pullrefresh').pullRefresh().refresh(true);
            }
        });
    }, 1500);
}
/**
 * 上拉加载具体业务实现
 */
function pullupRefresh() {
    setTimeout(function() {
        var table = document.body.querySelector('.mui-table-view');
        var lis = document.querySelectorAll('li.mui-table-view-cell');
        var length = lis.length;
        length = length ? length : 0;
       
        //查询数据
        jQuery.ajax({
            url: OPENAPI.selectItem,
            data:{
                index : length,
                size  : 10,
                itemName : app.itemName ,
                type : app.type,
                startTime : app.startTime ,
                endTime : app.endTime ,
                sorting :app.sorting 
            },
            dataType:'json',
            type:'post',
            timeout:5000,
            success:function(data){
                var listData = data.list;
                if(listData.length <= 0){
                    //没有更多数据
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
                }else{
                    for( var i=0; i<listData.length; i++ ){
                       
                        table.innerHTML += '<li id="'+ listData[i].itemId +'" class="mui-table-view-cell">'+
                                                '<div class="mui-table">'+
                                                    '<div class="mui-table-cell mui-col-xs-10">'+
                                                        '<h4 class="mui-ellipsis">'+ listData[i].itemName +'</h4>'+
                                                        '<p class="mui-h6 mui-ellipsis">发布时间:'+ FormatDate(listData[i].updatetime) +'</p>'+
                                                        '<p class="mui-h6 mui-ellipsis">资料完整度：'+ listData[i].s1 +'</p>'+
                                                    '</div>'+
                                                '</div>'+
                                            '</li>';
                    }
                    
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); 
                }
            },
            error:function(xhr,type,errorThrown){
                mui.toast('网络连接异常');
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
            }
        });
    }, 1500);
}

//时间格式化
function FormatDate (strTime) {
    var date = new Date(strTime);
    return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
}


mui.ready(function(){
    //检索十条数据
    mui('#pullrefresh').pullRefresh().pullupLoading();

    app = new Vue({
        el:'#app',
        data:{
            itemName : '',
            type : 1, //0代表单一项目
            startTime : '',
            endTime : '',
            sorting : 'desc' //desc降序，asc升序
        },
        methods:{
            handleSearchClick:function(){ //查询按钮单击事件
                //重新查询数据
                mui('#pullrefresh').pullRefresh().pulldownLoading(); 
           },
           handleStartDate:function(){
                var self = this;
                picker.show(function(rs){
                    self.startTime = rs.text;
                    //判断输入时间是否合法
                    if( !self.compareDate( self.startTime , self.endTime ) ){
                        mui.toast('起始时间不允许大于结束时间');
                        self.startTime = '';
                        return;
                    }
                    //重新查询数据
                    mui('#pullrefresh').pullRefresh().pulldownLoading();  
                });
            },
            handleEndDate:function(){
                var self = this;
                picker.show(function(rs){
                    self.endTime = rs.text;
                    //判断输入时间是否合法
                    if( !self.compareDate( self.startTime , self.endTime ) ){
                        mui.toast('结束时间不允许小于开始时间');
                        self.endTime = '';
                        return;
                    }
                     //重新查询数据
                     mui('#pullrefresh').pullRefresh().pulldownLoading(); 
                });
            },
            handleSortClick:function(event){
                var self = this;
                var objEl = event.target;
                var tagName = objEl.tagName;

                var upObjEl = null;
                
                if( tagName == 'B' || tagName == 'b' ){
                    //如果点击的是子节点b标签，则获取其父节点
                    upObjEl = objEl.parentNode;
                }else{
                    upObjEl = objEl;
                }

                //判断是否包含app-active类名
                if( upObjEl.classList.contains('app-active') ){
                    //将其该为升序
                    upObjEl.classList.remove('app-active');
                    self.sorting = 'asc';
                }else{
                    //将其改为降序
                    upObjEl.classList.add('app-active');
                    self.sorting = 'desc';
                }
                 //重新查询数据
                 mui('#pullrefresh').pullRefresh().pulldownLoading(); 
            },
            compareDate:function(start,end){ //比较两个时间
                if( start == '' || end == '' ){
                    return true;
                }

                var startTime = parseInt( ( new Date(start) ).getTime() );
                var endTime = parseInt( ( new Date(end) ).getTime() );
                if(startTime <= endTime){
                    return true;
                }else{
                    return false;
                }
            }
        },
        created:function(){
            //创建时间选择控件
            picker = new mui.DtPicker({"type":"date"});
        }
    });

    //检索十条数据
    mui('#pullrefresh').pullRefresh().pullupLoading();

    //列表点击事件
    mui('ul.mui-table-view').on('tap','li.mui-table-view-cell',function(){
        var prjId = this.id;
        mui.openWindow({
            url:'./systemPrjRead_detail.html?'+prjId,
            id:'systemPrjRead_detail'
        });
    });
});
